<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
    <style>
        html{
            height: 100%;
        }

        body{
            height: 100%;
            background-image: url(ground.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        main{
            width: 550px;
            height: 750px;
            margin: 0 auto;
            background-image: url(blackground.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            padding: 60px;
            

        }

        section{
            width: 300px;
            height: 100px;
            background-color: purple;
            border-radius: 10px;
            margin: 0 auto;
            position: relative;
        }

        /*2n+1 控制奇数位置的元素*/
        section:nth-child(2n+1){
            left: -80px;
        }
        section:nth-child(2n){
            left: 80px;
        }

        section:nth-child(1){
            background-color: #552211;

            /*z-index用来设置元素之间的层级关系.值越大越靠上.*/
            z-index: 400;

            /*rotate()旋转.单位是度:deg,正值代表顺时针,负值代表逆时针*/
            /*transform: rotate(-5deg)*/
        }
        
        /*2n 控制所有偶数位置的元素.*/
        section:nth-child(2){
            background-color: #dddddd;            
            top: -10px;
            z-index: 300;
        }

        section:nth-child(3){
            background-color: #22aa66;            
            top: -20px;
            z-index: 250;
        }
        section:nth-child(4){
            background-color: #ffc0cd;            
            top: -30px;
            z-index: 200;
        }

        section:nth-child(5){
            background-color: mediumvioletred;            
            top: -40px;
            z-index: 150;
        }
        section:nth-child(6){
            background-color: sandybrown;            
            top: -50px;
            z-index: 100;
        }
        section:nth-child(7){
            background-color: gainsboro;            
            top: -60px;
            z-index: 50;
        }
        section:nth-child(8){
            background-color: burlywood;            
            top: -70px;
            z-index: 10;
        }

        div{
            display: inline-block;
            margin: 0 0; 
            position: absolute;
        }

        #div11{
            font-family: '楷体';
            font-size: 40px;
            left: 30px; 
            top: 30px;
            color: cornflowerblue;           
        }

        #div12{
            font-family: '楷体';
            font-size: 70px;
            left: 140px; 
            color: white;                     
        }

        #div13{
            font-size: 16px;
            left: 45px;
            top: 70px; 
            color: white;
        }

        .nav{
            font-size: 20px;
            left: 200px;
            top: 10px;
            
        }

        #div22{
            left: 70px;
            top: 30px;
        }

        .content{
            z-index: 600;
            left: 185px;
            top: 43px;
        }
        p{
            margin: 0 0;
            font-size: 10px;
            text-align: right;
        }


        .left{
            text-align: left;
        }
        #div71{
            left: 40px;
            top: 40px;
        }

        #div81{
            left: 50px;
            top: 50px;
        }

        #p81{
            font-size: 24px;
        }

        img{
            width: 20px;
            border-radius: 50%;
           
        }

        .circle{
            z-index: 500;
            top: 70px;
            left: 10px;
        }

        .time{
            font-size: 18px;
            color: white;
            font-weight: bold;
        }

        #div44{
            top: 75px;
            left: 15px;
            z-index: 210;
        }

        #div54{
            top: 30px;
            left: 10px;
        }

        #div83{

        }

        #div84{

        }

        #yellow{
            border-radius: 50%;
            width: 120px;
        }

        #blue{
            border-radius: 50%;
            width: 200px;
        }



    </style>
</head>
<body>
    <main>
        <section>
            <div id="div11">于浩</div>
            <div id="div12">简历</div>
            <div id="div13">Yu Hao</div>
            <div class="circle">
                <img src="circle.jpg" alt="黑点" >
            </div>

        </section>

        <section>
            <div class="nav">个人信息</div>
            <div id="div22">
                <p>
                    籍贯: 河南
                </p>
                <p>
                    政治面貌: 无
                </p>
                <p>
                    毕业学校: 安阳工学院
                </p>
                <p>
                    专业: 汽车服务工程
                </p>
            </div>
            <div class="content">
                <p>
                    民族:汉族
                </p>
                <p>
                    出生日期:1990.01.16
                </p>
                <p>
                    身高:174cm
                </p>

            </div>
            <div class="circle">
                <img src="circle.jpg" alt="黑点" >
            </div>
        </section>
            
        <section>
            <div class="nav">联系方式</div>
            <div class="content">
                <p>
                    15978445567
                </p>
                <p>
                    59052127@qq.com
                </p>
                <p>
                    QQ: 59052127
                </p>
            </div>
            <div class="circle">
                <img src="circle.jpg" alt="黑点" >
            </div>
        </section>

        <section>
            <div class="nav">教育经历</div>
            <div class="content">
                <p>
                    于 河南省 安阳工学院
                </p>
                <p>
                    就读 汽车服务工程
                </p>
            </div>
            <div class="circle">
                <img src="circle.jpg" alt="黑点" >
            </div>
            <div id="div44">
                <p class="time">2012年9月至2014年6月</p>
            </div>
        </section>

        <section>
            <div class="nav">实践经历</div>
            <div class="content">
                <p>
                     XXXXX
                </p>
                <p>
                    Python工程师
                </p>
            </div>
            <div class="circle">
                <img src="circle.jpg" alt="黑点" >
            </div>
            <div id="div54">
                <p class="time">2017年1月至2017年7月</p>
            </div>
        </section>

        <section>
            <div class="nav">技能水平</div>
            <div class="content">
                <p>
                    熟练使用Python
                </p>
                <p>
                    了解html5,js等
                </p>
                <p>
                    熟练掌握办公软件
                </p>
                
            </div>
            <div class="circle">
                <img src="circle.jpg" alt="黑点" >
            </div>
        </section>

        <section>
            <div class="nav">自我评价</div>
            <div id="div71">
                <p class="left">1.熟练掌握相关技能, 大胆创新;</p>
                <p class="left">2.有良好的独立工作的能力;</p>
                <p class="left">3.沟通协作能力强, 能吃苦耐劳, 待人真诚热情.</p>

            </div>
            <div class="circle">
                <img src="circle.jpg" alt="黑点" >
            </div>
        </section>

        <section>
            <div class="nav">求职意向</div>
            <div id="div81">
                <p id="p81" class="left">Python开发工程师</p>
            </div>
            <div class="circle">
                <img src="circle.jpg" alt="黑点" >
            </div>
            <div id="div83">
                <img id="yellow" src="circle1.jip" alt="颜色背景">
            </div>
            <div id="div84">
                <img id="blue" src="circle2.jpg" alt="颜色背景">
            </div>
        </section>
        
    </main>
    
</body>
</html>